import React, { Component } from "react";
import Styles from "./search.module.scss";
import ElSearchHearder from "./el-search/ElSearchHearder";
import ElInput from "./el-input/ElInput";
import ElSearchHistory from "./el-search-history/ElSearchHistory";
import ElMall from "./el-mall/ElMall";
import ElTitle from "./el-title/ElTitle";
import {Route} from 'react-router-dom'
import styles from './search.module.scss'
 import store from '../../redux/store'
import {connect} from 'react-redux'
import { withRouter } from "react-router-dom";
import HomeFoot from '../Public/public_foot.jsx'
class search extends Component {
    state={
      status:'',
      keywordArr:'',
      getClickStatus:''
    }

    getChildrenInfo=(params)=>{
      // console.log('调用父组件的getChildrenInfo方法',params);
      this.setState({
        status:params
      })
    }
    getSearchHistory=(params) => {
      // console.log('调用父组件的getSearchHistory法',params);
      this.setState({
        keywordArr:params
      })
     
    }
    clearAll=(params) => {
      this.setState({
        keywordArr:params
      })
    }
     getClickStatus=(params) => {
    this.setState({
      getClickStatus:params
    })
  }

  render() {

   console.log(this.state.elParentSearchHistory);
    return (
      <div className={styles.searchBigBox} >
     <div>   <ElSearchHearder></ElSearchHearder></div>

      <div className={styles.connentMid}>
      <div><ElInput keywordArr={this.state.keywordArr}  getChildrenInfo={this.getChildrenInfo} getSearchHistory={this.getSearchHistory} getClickStatus={this.getClickStatus}  clearAllList={this.clearAllList}></ElInput></div>
       <div > <ElTitle titleHistory='搜索历史' titleMall='商家' status={this.state.status}></ElTitle></div>
      {
        this.state.status==='true'||this.state.status===''?<div><ElMall inputData={this.props.inputData} status={this.state.status}></ElMall></div>:<div><ElSearchHistory status={this.state.status}   keywordArr={this.state.keywordArr} clearAll={this.clearAll} className={this.state.elParentSearchHistory==='true'?styles.itemHidden:styles.itemShow}></ElSearchHistory></div>
      }

      </div>

       
       

   
     
    
        
     
{/*          
         {this.props.routes.map(route=>{
               return (
                 <Route exact={route.exact} key={route.path}   path={route.path} render={(props)=>{
                   let newProps={
                    ...props,
                    routes:route.routes
                   }
                   return <route.component {...newProps}></route.component>
                 }}></Route>
               )
             })} */}


 <HomeFoot></HomeFoot>
        
          </div>
     
    );
  }
}

// export default search;

export default withRouter(
  connect((state)=>{
    console.log(state);
    return {
      inputData:state.searchReducer.inputData,
      inputListArr:state.searchReducer.inputListArr
    }
  },()=>{
    return {}
  })(search)
)
